<template>
    <page-wrap>
      <div class="details-container">
        <div class="header-h2">
          <h2>桌号：{{ params.roomName }}</h2>
          <div class="h2-table">台单号：{{ params.consumeCode }}</div>
        </div>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData"
          :immediate-check="false"
          offset="100"
        >
          <div v-for="(item, index) in tableData" :key="index">
            <div class="details-container-header">
              <div class="container-header-item">
                <span class="item-title">人数：</span>
                <span style="color: #ffffff">{{ item.arrivedPeoperCount }}人</span>
                <span style="color: #ffffff">；共 {{ item.mainCount }} 项</span>
                <span style="color: #ffffff">、{{ item.mainGoodsCount }} 份；</span>
              </div>
              <!-- <div class="container-header-item">
                <span class="item-title">订台人：</span
                ><span style="color: #ffffff">{{ item.maintainUserName?item.maintainUserName:'--' }}</span>
              </div> -->
              <!-- <div class="container-header-item">
                <span class="item-title">开台时间：</span>
                <span style="color: #ffffff">
                      {{ dayjs(item.startTime).format('YYYY-MM-DD') }}
                      {{ dayjs(item.startTime).format('HH:mm:ss') }}
                    </span>
              </div> -->
              <div class="container-header-item">
                <span>商品金额：</span
                ><span style="color: #FFAA00"
                  >￥{{ formatNumber(item.goodsTotalAmt) }}</span
                >
              </div>
              <div class="container-header-item">
                <span>收款金额：</span
                ><span style="color: #00FF00"
                  >￥{{ formatNumber(item.payAmt) }}</span
                >
              </div>
              <div class="container-header-item">
                <span>未支付：</span
                ><span style="color: #ff3333"
                  >￥{{ formatNumber(item.unPayAmt) }}</span
                >
              </div>
              <div class="container-header-item">
                <span>优惠总金额：</span
                ><span style="color: #ffcc66"
                  >￥{{ formatNumber(item.disAmt) }}</span
                >
                <!-- <span class="item-preferential"
                  >(折扣：{{ item.disAmt }}元、补低消：{{ item.addMinConsume }}元、服务费：{{ item.serviceAmt }}元、抹零：{{ item.smallChange }}元)</span
                > -->
              </div>
              <div class="container-header-item">
                <span>其它金额：</span
                ><span style="color: #ffffff"
                  >￥{{ formatNumber(item.otherAmt) }}</span
                >
              </div>
              <div class="container-header-item">
                <span>开台备注：</span
                ><span style="color: #ffffff" v-if="item.note">{{
                  item.note
                }}</span>
                <span style="color: #ffffff" v-else="item.note">无</span>
              </div>
            </div>
            <div class="details-container-main">
              <div class="container-main-header">
                <div class="main-header-title">未结账商品</div>
                <!-- <div class="main-header-value" v-if="item.unPayGoods.length > 0" @click="goTodeal(item)">
                  去结账
                </div> -->
              </div>
              <div
                class="container-main-height"
                :class="{ isShow: showAllGoodsInfo }"
              >
                <!-- <div
                  class="container-main-content"
                  v-for="(v, k) in item.unPayGoods.slice(0, itemNumber)"
                  :key="k"
                > -->
                <div
                  class="container-main-content"
                  v-for="(v, k) in item.unPayGoods"
                  :key="k"
                >
                  <div class="main-content-title">
                    <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                    <div class="title-time">
                      合计:￥{{ formatNumber(v.totalAmt) }}
                      <!-- {{ dayjs(v.orderTime).format('YYYY-MM-DD') }}
                      {{ dayjs(v.orderTime).format('HH:mm:ss') }} -->
                    </div>
                    <!-- <div class="title-oderNum">{{ v.payBatchCode }}</div> -->
                  </div>
                  <div class="main-content-back"></div>
                  <div
                    class="main-content-item"
                    v-for="(vi, ki) in v.unPayGoodsdtl"
                    :key="ki"
                  >
                    <div v-if="!vi.goodsPriceInfos">
                      <div class="content-item-name">
                        {{ vi.goodsName }}
                      </div>
                      <div class="content-item-value">
                        <div class="item-value-specifications">
                          规格：{{ vi.standard }}
                        </div>
                        <div class="item-value-num">×{{ vi.realQty }}</div>
                        <div class="item-value-price">
                          ￥{{ formatNumber(vi.totalAmt) }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <van-collapse
                      v-model="activeNames"
                      class="main-content-package"
                      :accordion="false"
                      :is-link="false"
                      v-for="(packageItem, packageIndex) in v.unPayGoodsdtl"
                      :key="packageIndex"
                    >
                      <van-collapse-item
                        :name="packageItem.goodsCode + packageIndex"
                        @click="toggleActive('未结账',index, k, packageIndex)"
                        v-if="packageItem.goodsPriceInfos"
                      >
                        <template v-slot:title>
                          <div class="package-header">
                            <div class="package-header-title">
                              {{ packageItem.goodsName }}
                            </div>
                            <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                            <img
                              :src="customIcon"
                              class="package-img-icon"
                              v-if="packageItem.itemType == '2'"
                              :class="{
                                overturn: packageItem.isShow
                              }"
                            />
                          </div>
                          <div class="package-main">
                            <div class="package-main-num">
                              数量：{{ packageItem.realQty }}
                            </div>
                            <div class="package-main-price">
                              ￥{{ formatNumber(packageItem.totalAmt) }}
                            </div>
                          </div>
                        </template>
                        <template v-slot:default>
                          <div
                            class="package-footer"
                            v-for="(
                              packageGoods, packageGoodsInex
                            ) in packageItem.goodsPriceInfos"
                            :key="packageGoodsInex"
                            @click.stop=""
                          >
                            <div class="package-footer-name">
                              {{ packageGoods.goodsName }}
                            </div>
                            <div class="package-footer-value">
                              <div class="package-specifications">
                                规格：{{ packageGoods.standard }}
                              </div>
                              <div class="package-num">
                                ×{{ packageGoods.realQty }}
                              </div>
                              <div class="package-price">
                                ￥{{ formatNumber(packageGoods.realAmt) }}
                              </div>
                            </div>
                          </div>
                        </template>
                      </van-collapse-item>
                    </van-collapse>
                  </div>
  
                </div>
              </div>
  
            </div>
            <div class="details-container-main">
              <div class="container-main-header">
                <div class="main-header-title">支付中商品</div>
                <!-- <div class="main-header-value" @click="goToPay(item)" v-if="item.payPendingGoods.length > 0">
                  去支付
                </div> -->
              </div>
              <div
                class="container-main-height"
                :class="{ isShow: showAllGoodsInfo }"
              >
               
                <div
                  class="container-main-content"
                  v-for="(v, k) in item.payPendingGoods"
                  :key="k"
                >
                  <div class="main-content-title">
                    <div class="title-oderNum">{{ v.payBatchCode }}</div>
                    <div class="title-all">
                      <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                      <div class="title-time spe">
                        合计:￥{{ formatNumber(v.totalAmt) }}
                      </div>
                    </div>
                  </div>
                  <div class="main-content-back"></div>
                  <div
                    class="main-content-item"
                    v-for="(vi, ki) in v.payGoodsdtl"
                    :key="ki"
                  >
                    <div v-if="!vi.goodsPriceInfos">
                      <div class="content-item-name">
                        {{ vi.goodsName }}
                      </div>
                      <div class="content-item-value">
                        <div class="item-value-specifications">
                          规格：{{ vi.standard }}
                        </div>
                        <div class="item-value-num">×{{ vi.realQty }}</div>
                        <div class="item-value-price">
                          ￥{{ formatNumber(vi.totalAmt) }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <van-collapse
                      v-model="activeNames"
                      class="main-content-package"
                      :accordion="false"
                      :is-link="false"
                      v-for="(packageItem, packageIndex) in v.payGoodsdtl"
                      :key="packageIndex"
                    >
                      <van-collapse-item
                        :name="packageItem.goodsCode + packageIndex"
                        @click="toggleActive('未结账',index, k, packageIndex)"
                        v-if="packageItem.goodsPriceInfos"
                      >
                        <template v-slot:title>
                          <div class="package-header">
                            <div class="package-header-title">
                              {{ packageItem.goodsName }}
                            </div>
                            <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                            <img
                              :src="customIcon"
                              class="package-img-icon"
                              v-if="packageItem.itemType == '2'"
                              :class="{
                                overturn: packageItem.isShow
                              }"
                            />
                          </div>
                          <div class="package-main">
                            <div class="package-main-num">
                              数量：{{ packageItem.realQty }}
                            </div>
                            <div class="package-main-price">
                              ￥{{ formatNumber(packageItem.totalAmt) }}
                            </div>
                          </div>
                        </template>
                        <template v-slot:default>
                          <div
                            class="package-footer"
                            v-for="(
                              packageGoods, packageGoodsInex
                            ) in packageItem.goodsPriceInfos"
                            :key="packageGoodsInex"
                            @click.stop=""
                          >
                            <div class="package-footer-name">
                              {{ packageGoods.goodsName }}
                            </div>
                            <div class="package-footer-value">
                              <div class="package-specifications">
                                规格：{{ packageGoods.standard }}
                              </div>
                              <div class="package-num">
                                ×{{ packageGoods.realQty }}
                              </div>
                              <div class="package-price">
                                ￥{{ formatNumber(packageGoods.realAmt) }}
                              </div>
                            </div>
                          </div>
                        </template>
                      </van-collapse-item>
                    </van-collapse>
                  </div>
                  <div class="details-container-footer">
                      <div class="container-footer-header">
                        <div class="footer-header-title">支付记录</div>
                      </div>
                      <div
                        class="container-footer-main"
                        :class="{ isShow: showAllPayInfo }"
                      >
                        <div
                          class="container-footer-item"
                          v-for="(payItem, payIndex) in v.payRecordList.slice(
                            0,
                            showItem
                          )"
                          :key="payIndex"
                          :class="{ 'first-item': payIndex === 0 }"
                        >
                          <div class="footer-item-header">
                            <div class="serial">
                              支付流水号:{{ payItem.itemCode }}
                            </div>
                            <div class="method" v-if="payItem.payTypeName === '现金'">
                              现金支付
                            </div>
                            <div
                              class="method"
                              v-if="
                                payItem.payTypeName === '微信' ||
                                payItem.payTypeName === '支付宝'
                              "
                            >
                              线上支付
                            </div>
                            <div class="method" v-if="payItem.payTypeName === '赠送'">
                              赠送支付
                            </div>
                            <div class="method" v-if="payItem.payTypeName === '会员卡'">
                              会员卡支付
                            </div>
                          </div>
                          <div class="footer-item-main">
                            <div class="item-li">
                              <div class="item-li-left">支付时间</div>
                              <div class="item-li-right">
                                {{ dayjs(payItem.payDate).format('YYYY-MM-DD') }}
                                {{ dayjs(payItem.payDate).format('HH:mm:ss') }}
                              </div>
                            </div>
                            <div class="item-li">
                              <div class="item-li-left">支付金额</div>
                              <div class="item-li-right">
                                ￥{{ payItem.payAmt}}
                              </div>
                            </div>
                            <div class="item-li">
                              <div class="item-li-left">支付方式</div>
                              <div class="item-li-right">{{ payItem.payTypeName }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="container-footer-footer" @click="showPayAll(index)">
                        <van-icon
                          :name="v_triangle2"
                          class="footer-footer-icon"
                          :class="{ overturn: isPayOverturn }"
                        />
                      </div>
                  </div>
                 
                </div>
              </div>
  
            </div>
            <div class="details-container-main">
              <div class="container-main-header">
                <div class="main-header-title">已结账商品</div>
              </div>
              <div
                class="container-main-height"
                :class="{ isShow: showAllGoodsInfo }"
              >
                <div
                  class="container-main-content"
                  v-for="(v, k) in item.payGoods.slice(0, itemNumber)"
                  :key="k"
                >
                  <div class="main-content-title spe">
                    <div class="title-oderNum">{{ v.payBatchCode }}</div>
                    <div class="title-all">
                      <div class="title-product">{{v.mainGoodsCount}}份 {{v.mainCount}}项 &nbsp;</div>
                      <div class="title-time spe">
                        合计:￥{{ formatNumber(v.totalAmt) }}
                      </div>
                    </div>
                    
                  </div>
                  <div class="main-content-all">
                    <div class="content-all-btn" v-if="v.prodMethod == '未出品'" @click="changeGoodsType(v)">出品</div>
                    <div class="content-all-tip" v-else>已出品</div>
                    <div class="content-all-upper">
                      <div class="upper-title">优惠总金额：￥{{v.disTotalAmt}}</div>
                      <div class="upper-value">
                          <div class="value-top-left">赠送优惠：{{ v.storeDisAmt }}</div>
                          <div class="value-top-left">折扣优惠：{{ v.disAmt }}</div>
                          <div class="value-top-left">会员优惠：{{ v.vipDisAmt }}</div>
                          <div class="value-top-left">抹零：{{ v.smallChange }}</div>
                          <div class="value-top-left">团购券优惠：{{ v.ticketGroupAmt }}</div>
                      
                      </div>
                    </div>
                    <div class="content-all-upper">
                      <div class="upper-title">其他金额：￥{{v.otherTotalAmt}}</div>
                      <div class="upper-value">
                          <div class="value-top-left">服务费：{{ v.serviceAmt }}</div>
                          <div class="value-top-left">补低消差额：{{ v.addMinConsume }}</div>
                          <div class="value-top-left">不找赎：{{ v.notGiveChange }}</div>
                      </div>
                    </div>
                    
                  </div>
                  <div class="main-content-time">
                      <div class="time-line"></div>
                      <div class="time-title">下单时间：{{ v.orderTime }}</div>
                      <div class="time-line"></div>
                  </div>
                  <div
                    class="main-content-item"
                    v-for="(vi, ki) in v.payGoodsdtl"
                    :key="ki"
                  >
                    <div v-if="!vi.goodsPriceInfos">
                      <div class="content-item-name">
                        {{ vi.goodsName }}
                      </div>
                      <div class="content-item-value">
                        <div class="item-value-specifications">
                          规格：{{ vi.standard }}
                        </div>
                        <div class="item-value-num">×{{ vi.realQty }}</div>
                        <div class="item-value-price">
                          ￥{{ formatNumber(vi.realAmt) }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <van-collapse
                      v-model="activeNames"
                      class="main-content-package"
                      :accordion="false"
                      :is-link="false"
                      v-for="(packageItem, packageIndex) in v.payGoodsdtl"
                      :key="packageIndex"
                    >
                      <van-collapse-item
                        :name="packageItem.goodsCode + packageIndex"
                        @click="toggleActive('已结账',index, k, packageIndex)"
                        v-if="packageItem.goodsPriceInfos"
                      >
                        <template v-slot:title>
                          <div class="package-header">
                            <div class="package-header-title">
                              {{ packageItem.goodsName }}
                            </div>
                            <!-- <van-icon :name="customIcon" style="padding-left: 8px"  :class="{ overturn: isOverturn }"/> -->
                            <img
                              :src="customIcon"
                              class="package-img-icon"
                              v-if="packageItem.itemType == '2'"
                              :class="{
                                overturn: packageItem.isShow
                              }"
                            />
                          </div>
                          <div class="package-main">
                            <div class="package-main-num">
                              数量：{{ packageItem.realQty }}
                            </div>
                            <div class="package-main-price">
                              ￥{{ formatNumber(packageItem.totalAmt) }}
                            </div>
                          </div>
                        </template>
                        <template v-slot:default>
                          <div
                            class="package-footer"
                            v-for="(
                              packageGoods, packageGoodsInex
                            ) in packageItem.goodsPriceInfos"
                            :key="packageGoodsInex"
                            @click.stop=""
                          >
                            <div class="package-footer-name">
                              {{ packageGoods.goodsName }}
                            </div>
                            <div class="package-footer-value">
                              <div class="package-specifications">
                                规格：{{ packageGoods.standard }}
                              </div>
                              <div class="package-num">
                                ×{{ packageGoods.realQty }}
                              </div>
                              <div class="package-price">
                                ￥{{ formatNumber(packageGoods.realAmt) }}
                              </div>
                            </div>
                          </div>
                        </template>
                      </van-collapse-item>
                    </van-collapse>
                  </div>
                  <div class="details-container-footer">
                      <div class="container-footer-header">
                        <div class="footer-header-title">支付记录</div>
                      </div>
                      <div
                        class="container-footer-main"
                        :class="{ isShow: showAllPayInfo }"
                      >
                        <div
                          class="container-footer-item"
                          v-for="(payItem, payIndex) in v.payRecordList.slice(0,showItem)"
                          :key="payIndex"
                          :class="{ 'first-item': payIndex === 0 }"
                        >
                          <div class="footer-item-header">
                            <div class="serial">
                              支付流水号:{{ payItem.itemCode }}
                            </div>
                            <div class="method" v-if="payItem.payTypeName === '现金'">
                              现金支付
                            </div>
                            <div
                              class="method"
                              v-if="
                                payItem.payTypeName === '微信' ||
                                payItem.payTypeName === '支付宝'
                              "
                            >
                              线上支付
                            </div>
                            <div class="method" v-if="payItem.payTypeName === '赠送'">
                              赠送支付
                            </div>
                            <div class="method" v-if="payItem.payTypeName === '会员卡'">
                              会员卡支付
                            </div>
                          </div>
                          <div class="footer-item-main">
                            <div class="item-li">
                              <div class="item-li-left">支付时间</div>
                              <div class="item-li-right">
                                {{ dayjs(payItem.payDate).format('YYYY-MM-DD') }}
                                {{ dayjs(payItem.payDate).format('HH:mm:ss') }}
                              </div>
                            </div>
                            <div class="item-li">
                              <div class="item-li-left">支付金额</div>
                              <div class="item-li-right">
                                ￥{{ payItem.payAmt}}
                              </div>
                            </div>
                            <div class="item-li">
                              <div class="item-li-left">支付方式</div>
                              <div class="item-li-right">{{ payItem.payTypeName }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="container-footer-footer" @click="showPayAll(index)">
                        <van-icon
                          :name="v_triangle2"
                          class="footer-footer-icon"
                          :class="{ overturn: isPayOverturn }"
                        />
                      </div>
                  </div>
                </div>
              </div>
  
             
            </div>
          </div>
        </van-list>
      </div>
    </page-wrap>
  </template>
  <script setup>
  import { ref, reactive } from 'vue'
  import ls from '@/lib/ls'
  import { useRoute, useRouter } from 'vue-router'
  import useAppStore from '@/store/app'
  import useCartStore from '@/store/cart'
  
  import { NavBar, Collapse, CollapseItem, showToast } from 'vant'
  import dayjs from 'dayjs'
  import v_triangle from '@/assets/svg/details/v_details-triangle.svg'
  import v_triangle1 from '@/assets/svg/details/v_details-triangle1.svg'
  import v_triangle2 from '@/assets/svg/details/v_triangle.svg'
  import Api from '@/api'
  import { onMounted } from 'vue'
  
  const cartStore = useCartStore()
  const appStore = useAppStore()
  const route = useRoute()
  const router = useRouter()
  // 获取传过来的参数
  const params = route.query
  
  //--------------------------------------数据-----------------------------------------------
  const tableData = ref([])
  //---------------------------------------------------------------------------保留两位小数--------------------------------------------------
  function formatNumber (num) {
    if (num) {
      return num.toFixed(2)
    } else {
      return 0
    }
  }
  //--------------------------------------套餐折叠-----------------------------------------------
  const activeNames = ref(['']) // 当前展开面板的 name
  const customIcon = ref(v_triangle)
  // 翻转三角按钮
  const toggleActive = (title,index, k, packageIndex) => {
    if(title == '已结账'){
      tableData.value[index].payGoods[k].payGoodsdtl[packageIndex].isShow =
      !tableData.value[index].payGoods[k].payGoodsdtl[packageIndex].isShow
    }else{
      tableData.value[index].unPayGoods[k].unPayGoodsdtl[packageIndex].isShow =
      !tableData.value[index].unPayGoods[k].unPayGoodsdtl[packageIndex].isShow
    }
   
  }
  //--------------------------------------商品信息折叠-----------------------------------------------
  const itemNumber = ref(2) // 要显示几条数据
  const isOverturn = ref(false)
  const showAllGoodsInfo = ref(false) // 商品信息全部显示
  // 显示全部
  const showAll = val => {
    showAllGoodsInfo.value = !showAllGoodsInfo.value
    const itemAll = tableData.value[val].payGoods.length // 总共多少条数据
    if (itemNumber.value === 2) {
      itemNumber.value = itemAll
    } else {
      itemNumber.value = 2
    }
    isOverturn.value = !isOverturn.value
  }
  // ---------------------------------------------  按钮 ----------------------------------------------------------
  // 去结账
  const goTodeal = (e)=>{
        const d = ls.get('ROOM_DETAIL')
        console.log(d)
        if (d.consumeState != '3') {
          showToast('没有未支付的订单')
          return
        }
        ls.remove('CART_LIST')
        cartStore.cartList = []
        cartStore.tableInfo = {
          roomName: d.roomName,
          roomCode: d.roomCode,
          waiterUserCode: appStore.user_info.userCode,
          waiterUserName: appStore.user_info.userName,
          minConsume: d.minConsume,
          consumeCode: d.consumeCode,
          currentConsume: d.currentConsume,
          consumeMinConsume: d.consumeMinConsume,
          consumeRemark: d.consumeRemark
        }
        ls.set('TABLE_INFO', cartStore.tableInfo)
        cartStore.orderBatchCode = d.orderBatchCode
        cartStore.payBatchCode = d.payBatchCode
        ls.set('ORDER_BATCH_CODE', d.orderBatchCode)
        ls.set('PAY_BATCH_CODE', d.payBatchCode)
        router.push({
          path: `/open/orderConfirm`,
          query: { from: 'open' }
        })
       
  }
  // 去支付
  const goToPay = (e)=>{
        const d = ls.get('ROOM_DETAIL')
        console.log(d)
        if (d.consumeState != '3') {
          showToast('没有未支付的订单')
          return
        }
        ls.remove('CART_LIST')
        cartStore.cartList = []
        cartStore.tableInfo = {
          roomName: d.roomName,
          roomCode: d.roomCode,
          waiterUserCode: appStore.user_info.userCode,
          waiterUserName: appStore.user_info.userName,
          minConsume: d.minConsume,
          consumeCode: d.consumeCode,
          currentConsume: d.currentConsume,
          consumeMinConsume: d.consumeMinConsume,
          consumeRemark: d.consumeRemark
        }
        ls.set('TABLE_INFO', cartStore.tableInfo)
        cartStore.orderBatchCode = d.orderBatchCode
        cartStore.payBatchCode = d.payBatchCode
        ls.set('ORDER_BATCH_CODE', d.orderBatchCode)
        ls.set('PAY_BATCH_CODE', d.payBatchCode)
    
    // 有支付中的订单
    router.push({
        path: '/open/orderCashier'
    })
        ls.set('PAY_TYPE', 3)
        
  }
  
  // 更新出品状态
  const changeGoodsType = (e)=>{
    Api.Common.AppObjProcess.Do({
      functionName: 'UpdateGoodsPayType',
      contentData: {payBatchCode:e.payBatchCode}
    }).then(res=>{
      showToast('更新出品状态成功')
      loadData(true)
    })
  }
  //--------------------------------------支付记录折叠-----------------------------------------------
  const showItem = ref(2) // 要显示几条数据
  const isPayOverturn = ref(false)
  const showAllPayInfo = ref(false) // 支付记录全部显示
  // 显示全部
  const showPayAll = val => {
    const showItemAll = tableData.value[val].payList.length // 总共多少条数据
  
    if (showItem.value === 2) {
      showItem.value = showItemAll
    } else {
      showItem.value = 2
    }
    showAllPayInfo.value = !showAllPayInfo.value
    isPayOverturn.value = !isPayOverturn.value
  }
  // -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
  //表单
  const postForm = reactive({
    roomCode: '', // 房台号
    consumeCode: '', // 订单号
    orderBatchCode:'',
    pageIndex: 1,
    pageSize: 15,
    stratDate: '', // 开始时间
    endDate: '' // 结束时间
  })
  const loading = ref(false)
  const finished = ref(false)
  // const initBs = ref(0)
  const loadData = async function (refresh = false) {
    if (refresh === true) {
      postForm.pageIndex = 1
      tableData.value = []
      finished.value = false
    }
    loading.value = true
   
    const resp = await Api.Common.AppObjProcess.Do({
      functionName: 'GetRoomOpeHistoryDetailNewV1',
      contentData: postForm
    })
    console.log(resp.result);
    if (refresh === true) {
      if (resp.result.length !== postForm.pageSize) {
        finished.value = true
      }
    }
   
    Array.prototype.push.apply(tableData.value, resp.result)
    console.log(tableData.value);
    if (resp.result.length > 0) {
      postForm.pageIndex++
    } else {
      finished.value = true
    }
    loading.value = false
  }
  // -----------------------------------------------------初始化--------------------------------------------------
  const onInit = () => {
    postForm.roomCode = params.roomCode
    if (params.consumeCode) {
      postForm.consumeCode = params.consumeCode
    }
    if(params.orderBatchCode){
      postForm.orderBatchCode = params.orderBatchCode
    }
    if (params.stratDate) {
      postForm.stratDate = params.stratDate
      postForm.endDate = params.endDate
    }
  
    loadData(true)
  
   
  }
  onInit()
  </script>
  <style scoped lang="scss">
  ::v-deep(.van-cell) {
    padding: 0;
  }
  ::v-deep(.van-cell--clickable) {
    background: #28282e;
  }
  ::v-deep(.van-cell__right-icon) {
    display: none;
  }
  ::v-deep(.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after) {
    border: none;
  }
  ::v-deep(.van-collapse-item__content) {
    padding: 0;
    background: #28282e;
  }
  ::v-deep(.van-collapse-item__title--expanded:after) {
    border: none;
  }
  ::v-deep(.van-icon__image) {
    width: 20px;
    height: 20px;
  }
  ::v-deep(.van-icon__image.clicked) {
    transform: rotate(180deg);
  }
  .details-container {
    //   padding: 0px 10px 10px;
    .header-h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 13px;
      h2 {
        background: #222226;
        border-radius: 4px;
        padding: 12px 13px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        white-space: nowrap;
        line-height: 18px;
        margin: 10px 12px 12px 0px;
      }
      .h2-table{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 14px;
      }
    }
    .details-container-header {
      .container-header-item {
        padding: 0 0 20px 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 16px;
        .item-preferential {
          padding: 2px 0px 2px 6px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 12px;
        }
      }
    }
  
    .details-container-main {
      margin: 0px 12px 10px 12px;
      .container-main-header {
        // border-bottom: 1px solid #383840;
        background: #28282E;
        display: flex;
        justify-content: space-between;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        // background-image: url('@/assets/images/open/i_details_gradient.png');
        // background-repeat: no-repeat;
        // background-position: center center;
        // background-size: cover;
      
        .main-header-title {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffaa00;
          line-height: 18px;
          padding: 17px 0px 17px 12px;
        }
        .main-header-value {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 30px;
          width: 60px;
          height: 30px;
          background: #5C5C66;
          border-radius: 4px;
          text-align: center;
          margin-top: 10px;
          margin-right: 12px;
        }
      }
      .container-main-height {
        max-height: 2000px;
        overflow: hidden;
        transition: max-height 2s ease;
        will-change: max-height;
        &.isShow {
          max-height: 100%;
        }
        .container-main-content {
          background: #222226;
          .main-content-title {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 12px;
            padding: 9px 6px 9px 6px;
            &.spe{
              justify-content: space-between;
            }
            .title-all{
              display: flex
            }
            .title-time{
              color: #FF3333;
              &.spe{
                color: #FFAA00;
              }
            }
          }
          .main-content-all{
            position: relative;
            .content-all-btn{
              position: absolute;
              right: 10px;
              width: 60px;
              height: 30px;
              background: #5C5C66;
              border-radius: 4px;
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #FFFFFF;
              line-height: 30px;
              text-align: center;
            }
            .content-all-tip{
              position: absolute;
              right: 10px;
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #999999;
              line-height: 30px;
              text-align: center;
            }
            .content-all-upper{
              .upper-title{
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 16px;
                padding-bottom: 12px;
                padding-left: 12px;
              }
              .upper-value{
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                padding: 0 20px;
                .value-top-left{
                  // flex-basis: 50%;
                  // flex: 1;
                  width: 50%;
                  font-family: PingFang SC;
                  font-weight: 500;
                  font-size: 12px;
                  color: #999999;
                  line-height: 12px;
                  padding-bottom: 10px
                }
              }
            }
          }
          .main-content-time{
            background: #28282E;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 0 24px;
            .time-line{
              width: 60px;
              height: 1px;
              background: #999999;
            }
            .time-title{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 13px;
              color: #999999;
              line-height: 13px;
            }
          }
          .main-content-back{
            height: 10px;
            background: #28282E;
          }
          .main-content-item {
            .content-item-name {
              padding: 0 0 12px 22px;
              font-size: 16px;
              color: #ffffff;
              line-height: 16px;
            }
            .content-item-value {
              display: flex;
              flex-wrap: wrap;
              padding: 0 34px 20px 34px;
              div {
                font-size: 14px;
                flex-basis: 33.33%;
                font-family: PingFang SC;
                font-weight: 500;
                color: #cccccc;
                line-height: 14px;
              }
              .item-value-specifications {
                // margin-left: 34px;
              }
              .item-value-num {
                text-align: center;
              }
              .item-value-price {
                color: #ffffff;
                text-align: right;
              }
            }
          }
          .main-content-package {
            .package-header {
              display: flex;
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 16px;
              .package-img-icon {
                width: 16px;
                height: 16px;
                margin-left: 8px;
                &.overturn {
                  transform: rotate(180deg);
                }
              }
  
              &-title {
                padding: 0 0 14px 22px;
              }
            }
            .package-main {
              display: flex;
              justify-content: space-between;
              padding: 0 34px 30px 34px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 14px;
              &-num {
                color: #cccccc;
              }
              &-price {
                color: #ffffff;
              }
            }
  
            .package-footer {
              .package-footer-name {
                padding: 0 0 12px 34px;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 16px;
              }
              .package-footer-value {
                display: flex;
                flex-wrap: wrap;
                padding: 0 34px 20px 46px;
                div {
                  font-size: 14px;
                  flex-basis: 33.33%;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #cccccc;
                  line-height: 14px;
                }
                .package-specifications {
                }
                .package-num {
                  text-align: center;
                  flex-basis: calc(33.33% - 12px);
                }
                .package-price {
                  color: #cccccc;
                  text-align: right;
                  flex-basis: calc(33.33% + 12px);
                }
              }
            }
          }
          .main-content-footer {
            display: flex;
            justify-content: space-between;
            align-content: center;
            font-family: PingFang SC;
            font-weight: 500;
            margin: 0 12px 0 12px;
            border-bottom: 1px solid #383840;
            .footer-order {
              padding: 4px 8px 4px 8px;
              font-size: 13px;
              color: #cccccc;
              line-height: 13px;
              background: #45454d;
              border-radius: 2px;
              margin-bottom: 20px;
            }
            .footer-right {
              display: flex;
              margin-bottom: 22px;
              // align-content:flex-end;
  
              &-all {
                font-size: 12px;
                color: #cccccc;
                line-height: 12px;
                align-self: flex-end;
              }
              &-value {
                font-size: 18px;
                color: #ffaa00;
                line-height: 18px;
                align-self: flex-end;
              }
            }
          }
        }
      }
  
      .container-main-footer {
        margin: 0 auto;
        background: #28282e;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        .main-footer-icon {
          padding: 10px 0;
        }
        .overturn {
          transform: rotate(180deg);
        }
      }
    }
    .details-container-footer {
      // margin: 0px 12px 10px 12px;
      .container-footer-header {
        border-top: 1px dashed #999999;;
        // border-top-left-radius: 8px;
        // border-top-right-radius: 8px;
        // background-image: url('@/assets/images/open/i_details_gradient.png');
        // background-repeat: no-repeat;
        // background-position: center center;
        // background-size: cover;
        .footer-header-title {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffaa00;
          line-height: 18px;
          padding: 17px 0px 0px 12px;
        }
      }
      .container-footer-main {
        max-height: 700px;
        overflow: hidden;
        // background: #28282e;
        padding: 10px 12px 0 12px;
        &.isShow {
          max-height: 100%;
        }
        .container-footer-item {
          background: #313138;
          border-radius: 4px;
          margin-top: 10px;
          &.first-item {
            margin-top: 0px;
          }
          .footer-item-header {
            display: flex;
            justify-content: space-between;
            .serial {
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 12px;
              padding: 19px 0 18px 12px;
            }
            .method {
              margin: 12px 12px 12px 0;
              padding: 6px 0px;
              // background: #454c4a;
              border-radius: 4px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #66ccaa;
              line-height: 13px;
            }
          }
          .footer-item-main {
            padding-bottom: 2px;
            .item-li {
              display: flex;
              justify-content: space-between;
              font-family: PingFang SC;
              font-weight: 500;
              &-left {
                padding: 0px 0px 18px 20px;
                font-size: 14px;
                color: #cccccc;
                line-height: 14px;
              }
              &-right {
                padding: 0px 20px 18px 0;
                font-size: 14px;
                color: #ffffff;
                line-height: 14px;
              }
            }
          }
        }
      }
      .container-footer-footer {
        margin: 0 auto;
        background: #28282e;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        .footer-footer-icon {
          padding: 10px 0;
        }
        .overturn {
          transform: rotate(180deg);
        }
      }
    }
  }
  .title-oderNum {
    color: #FFAA00 !important;
  }
  </style>
  